import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';

import '../../../conf/m3.dart';
import '../../../widgets/app_widgets.dart';

class PositionedPage extends PageWithTitle {
  const PositionedPage() : super("定位组件(Positioned)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("定位组件用于通过上下左右四个边缘，确定组件在容器中的位置"),
      _Example(),
      AppSpacer.mini,
      UlItem("Positioned"),
      NoticeText("注意："),
      NoticeText("1、因为定位组件的各边位置是相对于容器而言的，所以定位组件必须在Stack"
          "（容器）之类，并且中间不能嵌套可渲染组件"),
      NoticeText("2、作为容器需要固定的宽高，不能是自适应的，因为定位组件本身依靠容器的四条边"
          "的位置来确定自身四条边的位置，若容器还依赖我们的高度来确定高度就变成都依赖对方属性来"
          "确定自身属性，结果谁都无法确定"),
      NoticeText("3、若在同一方向上只设置了一个属性，比如left，则right由子组件大小来确定"
          "left+child.width"),
      NoticeText("4、若在同时设置了left与right(或者width)，则会覆盖子组件的宽度属性，因为"
          "我们已经强制决定了组件的right位置，纵向上的设置也是同理"),
      LabelText("- left，左侧距离容器的左边缘的距离，它不是一个偏移量而是一个内边距"),
      LabelText("- top，上边距"),
      LabelText("- right，右边距"),
      LabelText("- bottom，下边距"),
      LabelText("- width，组件宽度，若不为空，则left与right只能设置一个，因为确定组件位置"
          "只需要其中两个值，同时设置三个值会因为互相冲突导致无法确定位置"),
      LabelText("- height，组件高度，使用时也需注意，它与宽度一样有限制"),
      UlItem("PositionedDirectional"),
      BodyText("支持布局方向的定位组件，与Positioned一样，只是它用start与end代替left "
          "right，实现从右到左布局的自适应，（少数国家阅读习惯是从右到左，采用这种支持布局方向"
          "的组件在国际化上更加好）"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surfaceContainer,
        borderRadius: M3.connerRadiusMedium,
      ),
      child: Stack(
        children: [
          Positioned(
            left: 10,
            top: 10,
            child: Container(
              width: 40,
              height: 40,
              color: Colors.red,
            ),
          ),
          Positioned(
            left: 100,
            top: 10,
            right: 0,
            child: Container(
              width: 40,
              height: 40,
              color: Colors.green,
            ),
          ),
          Positioned(
            left: 100,
            top: 50,
            width: 50,
            height: 50,
            child: Container(
              width: 40,
              height: 40,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}
